<template>
  <div class="img_attr">
    <!-- 单图属性 -->
    <div v-if="type === 'img'" class="monograph">
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>图片内容</span>
        </div>
        <div class="upload_img" @click="gallery">
          <i class="iconfont icon-tubiaolunkuo-" />
          <img :class="['viewImg',param.attr.base64Src? '': 'opacity0']" :src="param.attr.base64Src">
          <div v-show="coverFlag && param.attr.base64Src" class="upload_cover" @click="gallery" @mouseover="coverMouse" @mouseout="coverMouse">
            <i class="el-icon-upload" />
          </div>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>链接</span>
        </div>
        <el-input v-model="param.attr.hrefUrl" placeholder="请输入URL">
          <template slot="prepend">跳转网页</template>
        </el-input>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>布局</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="5" class="lineHeight36">宽度</el-col>
            <el-col :span="15">
              <el-input-number v-model="param.attr.width" class="widthAuto" :min="1" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="5" class="lineHeight36">高度</el-col>
            <el-col :span="15">
              <el-input-number v-model="param.attr.height" class="widthAuto" :min="1" size="small" controls-position="right" />
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 组图属性 -->
    <div v-if="!type.indexOf('swipe')" class="monograph">
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>图片内容</span>
        </div>
        <div v-for="(item, index) in param.attr.base64Src" :key="index" class="upload_swipe">
          <div class="swipe_link">
            <div class="swipe_img_upload" @click="gallery(index)">
              <img :src="item.src">
            </div>
            <span class="link_title">链接：</span>
            <span class="link_edit">未设置</span>
          </div>
          <div class="swipe_link">
            <span class="swipe_edit">设置</span>
            <span class="swipe_delete" @click="swipeDel(index, param.attr.base64Src)">删除</span>
          </div>
        </div>
        <el-link icon="el-icon-plus" type="primary" :underline="false" @click="swipeAdd(param.attr.base64Src)">添加图片</el-link>
        <span class="swipe_list_num">还可选择 <span>{{ Number(20) - param.attr.base64Src.length }}</span> 个图片</span>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>布局</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="5" class="lineHeight36">宽度</el-col>
            <el-col :span="15">
              <el-input-number v-model="param.attr.width" class="widthAuto" :min="1" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="5" class="lineHeight36">高度</el-col>
            <el-col :span="15">
              <el-input-number v-model="param.attr.height" class="widthAuto" :min="1" size="small" controls-position="right" />
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>高级设置</span>
        </div>
        <el-switch
          v-model="param.attr.autoplay"
          active-text="自动播放"
        />
        <br>
        <el-switch
          v-model="param.attr.indicator"
          class="marTop15"
          active-value="none"
          inactive-value="—"
          active-text="指示灯隐藏"
        />
        <br>
        <el-switch
          v-model="param.attr.loop"
          class="marTop15"
          active-text="是否切换循环"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Link, InputNumber, Row, Col, Switch, Radio, RadioGroup, RadioButton } from 'element-ui'
import { imgSize } from '@/js/common'
import { mapGetters } from 'vuex'
Vue.use(Link)
Vue.use(InputNumber)
Vue.use(Row)
Vue.use(Col)
Vue.use(Switch)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(RadioButton)
export default {
  name: 'ImgAttr',
  computed: {
    ...mapGetters([
      'viewData',
      'iphoneIndex'
    ])
  },
  watch: {
    galleryObject(val) {
      this.gallery_active(val)
    }
  },
  props: {
    type: {
      type: String,
      default: 'img'
    },
    param: {
      type: Object,
      default: Object
    },
    galleryObject: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      coverFlag: false,
      swipeImgCurrent: 0
    }
  },
  mounted() {},
  methods: {
    async imgFile(item, url) {
      Vue.set(item, 'base64Src', url)
      Vue.set(item, 'height', await imgSize(url))
    },
    async swipeFile(item, url) {
      Vue.set(item, 'src', url)
    },
    gallery(index) {
      const _that = this
      _that.$emit('drawer', true)
      if (typeof index !== 'number') return
      typeof index === 'number' ? _that.swipeImgCurrent = index : ''
    },
    gallery_active(url) {
      const _that = this
      const type = _that.param.type
      const imgReg = RegExp(/img/)
      const swipeReg = RegExp(/swipe/)
      if (imgReg.test(type)) {
        _that.imgFile(_that.param.attr, url)
      } else if (swipeReg.test(type)) {
        _that.swipeFile(_that.param.attr.base64Src[_that.swipeImgCurrent], url)
      }
    },
    coverMouse() {
      const _that = this
      _that.coverFlag = !_that.coverFlag
    },
    swipeDel(index, item) {
      item.splice(index, 1)
    },
    swipeAdd(item) {
      const param = {}
      item.push(param)
    }
  }
}
</script>

<style scoped lang="scss">
    .img_attr {
      .monograph {
        margin: 20px 0;
        .content {
          padding: 24px 8px;
          border-bottom: 1px solid #e8e8e8;
          .marTop15 {
            margin-top: 15px;
          }
          .title {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .tile_div {
              width: 4px;
              height: 16px;
              border-radius: 2px;
              display: inline-block;
              background-color: #4e90ff;
            }
            span {
              color: #333;
              font-size: 20px;
              padding-left: 8px;
            }
          }
          .upload_img {
            width: 100%;
            height: 255px;
            border-radius: 4px;
            border: 1px dashed #d9d9d9;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            .icon-tubiaolunkuo- {
              color: #d9d9d9;
              font-size: 50px;
            }
            input[type=file] {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              opacity: 0;
              z-index: 1;
            }
            .viewImg {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
            }
            .upload_cover {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 2;
              background: black;
              opacity: 0.5;
              display: flex;
              align-items: center;
              justify-content: center;
              i {
                color: #4950bf !important;
                font-size: 30px;
                opacity: 1 !important;
              }
            }
          }
          .upload_img:hover {
            border: 1px dashed #4e90ff !important;
            .icon-tubiaolunkuo- {
              color: #4e90ff !important;;
            }
          }
          .upload_swipe {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 61px;
            margin-bottom: 8px;
            border-radius: 4px;
            background-color: #f5f5f5;
            .swipe_img_upload {
              position: relative;
              img {
                width: 67px;
                height: 45px;
                margin: 0 8px 0 30px;
                flex: none;
                background-size: cover;
                background-position: 50%;
                background-repeat: no-repeat;
              }
              input[type=file] {
                position: absolute;
                top: 0;
                left: 0;
                width: 67px;
                height: 45px;
                margin: 0 8px 0 30px;
                opacity: 0;
              }
            }
            .swipe_link {
              font-size: 12px;
              display: flex;
              align-items: center;
              .link_edit {
                font-weight: 400;
                color: #888;
              }
              .swipe_edit, .swipe_delete {
                cursor: pointer;
                padding: 0 8px 0 0;
                font-weight: 400;
                color: #4e90ff;
              }
            }
          }
          .upload_swipe:before {
            content: "";
            position: absolute;
            left: 12px;
            top: 23px;
            width: 2px;
            height: 2px;
            color: #666;
            background-color: #666;
            border-radius: 100%;
            box-shadow: 0 4px, 0 8px, 0 12px, 4px 0, 4px 4px, 4px 8px, 4px 12px;
          }
          .el-link--inner {
            font-size: 12px;
          }
          .swipe_list_num {
            margin-left: 16px;
            font-size: 12px;
            color: #999;
            span {
              color: black;
              font-size: 13px;
            }
          }
          .layout_content {
            color: #333;
            font-size: 14px;
          }
        }
      }
    }
</style>
